* { margin:0; padding:0; }
html { background: white; }

body{
	min-height: 400px;
    padding: 80px 0 0;
	font:14px/1.3 'Segoe UI',Arial, sans-serif;
}

h1,h2,h3,h4,h5,h6{font-weight:700;font-family:"Droid Sans",sans-serif;color:#434853;text-shadow:0 1px 0 #fff;letter-spacing:-.5px}

h1{font-size:20px;color:#2d932b;padding:0 0 13px 0;border-bottom:1px solid #e0e0e0}

a, a:visited {
	text-decoration:none;
	outline:none;
	color:#54a6de;
}

a:hover{
	text-decoration:underline;
}

#formContainer{
	width:300px;
	height:200px;
	margin:0 auto;
	position:relative;
	z-index:1;
	
	-moz-perspective: 800px;
	-webkit-perspective: 800px;
	perspective: 800px;
}

#formContainer form{
	width:100%;
	position:absolute;
	top:0;
	left:0;
	
	border:1px solid #d5d5d5;
	background:#f9f9f9;
	display:block;
	margin:100px auto 0 auto;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	box-shadow:0 0 2px #dadada, inset 0 -1px 0 #e6e6e6;
	
	padding: 15px;
	
	/* Enabling 3d space for the transforms */
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	
	/* When the forms are flipped, they will be hidden */
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	
	/* Enabling a smooth animated transition */
	-moz-transition:0.8s;
	-webkit-transition:0.8s;
	transition:0.8s;
	
	/* Configure a keyframe animation for Firefox */
	//-moz-animation: pulse 2s infinite;
	
	/* Configure it for Chrome and Safari */
	//-webkit-animation: pulse 2s infinite;
}

#login{
	z-index:100;
}

#register{
	z-index:1;
	opacity:0;
	height: 230px;

	-moz-transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
	transform:rotateY(180deg);
}

#formContainer.flipped #login{
	opacity:0;
	
	/**
	 * Rotating the login form when the
	 * flipped class is added to the container
	 */
	
	-moz-transform:rotateY(-180deg);
	-webkit-transform:rotateY(-180deg);
	transform:rotateY(-180deg);
}

#formContainer.flipped #register{
	opacity:1;
	height: 230px;

	-moz-transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}



input[type=text], input[type=password] {
	font: 15px 'Segoe UI',Arial,sans-serif;
	height: 36px;
	width: 100%;
	margin-bottom: 10px;
	text-indent: 8px;
	color: #111;
}

#login_submit, #register_submit {
	width: 101%;
    height: 38px;
	margin-bottom: 8px;
 
    box-shadow: inset 0 1px rgba(255,255,255,0.3);
    border-radius: 3px;
    cursor: pointer;
 
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 16px;
    line-height: 38px; /* Same as height */
    text-align: center;
    font-weight: bold;
	
	background: linear-gradient(#34a5cf, #2a8ac4);
    border: 1px solid #2b8bc7;
    color: #ffffff;
    text-shadow: 0 -1px rgba(0,0,0,0.3);
    text-decoration: none;
}



